<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日头条 - 22001010819 郑力</title>
    <link rel="stylesheet" href="zhengli.css">
    <link rel="stylesheet" href="./fonts/font_4714490_gx5miy8jpuq/iconfont.css">
</head>
<body>
    <!-- 头部搜索栏 -->
    <header class="zheng_header">
        <div class="zheng_search">
            <i class="iconfont icon-sousuo"></i>
            <input type="text" placeholder="乌军最新阵亡人数公布">
        </div>
        <div class="zheng_header_actions">
            <button class="zheng_publish_btn">
                <i class="iconfont icon-fabu"></i>
                <span>发布</span>
            </button>
            <button class="zheng_ai_btn">
                <i class="iconfont icon-wuguan"></i>
                <span>AI助理</span>
            </button>
        </div>
    </header>

    <!-- 顶部导航栏 -->
    <nav class="zheng_top_nav">
        <div class="zheng_nav_list" id="tabList">
            <a href="#tab1" class="zheng_nav_item" data-tab="tab1">关注</a>
            <a href="#tab2" class="zheng_nav_item active" data-tab="tab2">推荐</a>
            <a href="#tab3" class="zheng_nav_item" data-tab="tab3">热榜</a>
            <a href="#tab4" class="zheng_nav_item" data-tab="tab4">发现</a>
            <a href="#tab5" class="zheng_nav_item" data-tab="tab5">大连</a>
            <a href="#tab6" class="zheng_nav_item" data-tab="tab6">视频</a>
            <a href="#tab7" class="zheng_nav_item zheng_nav_audio" data-tab="tab7">
                <i class="iconfont icon-erji"></i>
            </a>
        </div>
    </nav>

    <!-- 内容区域 -->
    <main class="zheng_main">
        <div class="tab-content" id="tab1" style="display: none;">
            <h2>关注内容</h2>
            <!-- 关注tab的内容 -->
        </div>
        
        <div class="tab-content" id="tab2">
            <!-- 原有的推荐内容放在这里 -->
            <div class="zheng_audio_card">
                <div class="zheng_audio_info">
                    <span class="zheng_audio_tag">听书</span>
                    <span class="zheng_audio_category">励志成功</span>
                    <span class="zheng_audio_count">2866人在听</span>
                </div>
                <div class="zheng_audio_content">
                    <div class="zheng_audio_text">
                        <h3>《人性的弱点》《人性的弱点》中告诉了人们这样几条处世规则：一、对别人表现出...</h3>
                    </div>
                    <div class="zheng_audio_cover">
                        <img src="./images/book_cover.jpg" alt="人性的弱点">
                        <span class="zheng_score">7.6分</span>
                    </div>
                </div>
            </div>

            <!-- 新闻卡片 -->
            <div class="zheng_news_card">
                <div class="zheng_news_content" onclick="location.href='news_detail.html'">
                    <p>今年5月浙江义乌，男子租了一辆70多万的奔驰，租期3天，每天租金1700元，押金3000元，万万没想到，第二天男子把车开到杭...</p>
                    <span class="zheng_read_more">全文</span>
                </div>
                <div class="zheng_news_images">
                    <img src="./images/news1.jpg" alt="奔驰车" loading="lazy">
                    <img src="./images/news2.jpg" alt="男子照片" loading="lazy">
                    <img src="./images/news3.jpg" alt="文件照片" loading="lazy">
                </div>
                <div class="zheng_news_footer">
                    <div class="zheng_author">
                        <span>诺斯罗兰的笔记</span>
                    </div>
                    <div class="zheng_actions">
                        <span class="zheng_like">
                            <i class="iconfont icon-like"></i>
                            6943
                        </span>
                        <i class="iconfont icon-more"></i>
                    </div>
                </div>
            </div>

            <!-- 视频卡片 -->
            <div class="zheng_video_card">
                <h3 class="zheng_video_title">市场上的假牛肉是怎么制作的？妥妥的科技与狠活，看完谁还敢吃？</h3>
                <div class="zheng_video_cover">
                    <video> src="./images/shipin.mp4"  
                           controls
                           preload="none"
                           playsinline
                    </video>
                    <span class="zheng_video_duration">05:17</span>
                </div>
            </div>
        </div>
        <div class="tab-content" id="tab3" style="display: none;">
            <h2>热榜内容</h2>
            <!-- 热榜tab的内容 -->
        </div>
        <!-- 其他tab内容... -->
    </main>

    <!-- 底部导航栏 -->
    <footer class="zheng_footer">
        <nav class="zheng_bottom_nav">
            <a href="index.html" class="zheng_nav_item active">
                <i class="iconfont icon-toutiao"></i>
                <span>头条</span>
            </a>
            <a href="video.html" class="zheng_nav_item">
                <i class="iconfont icon-shipin"></i>
                <span>视频</span>
            </a>
            <a href="task.html" class="zheng_nav_item">
                <i class="iconfont icon-daibanrenwu"></i>
                <span>任务</span>
            </a>
            <a href="shop.html" class="zheng_nav_item">
                <i class="iconfont icon-shangcheng"></i>
                <span>商城</span>
            </a>
            <a href="mine.html" class="zheng_nav_item">
                <i class="iconfont icon-wode"></i>
                <span>我的</span>
            </a>
        </nav>
    </footer>

    <script>
    // 在main元素后添加以下代码
    const main = document.querySelector('.zheng_main');
    // 添加tab切换功能
    document.addEventListener('DOMContentLoaded', function() {
        const tabList = document.getElementById('tabList');
        const tabContents = document.querySelectorAll('.tab-content');
        
        tabList.addEventListener('click', function(e) {
            e.preventDefault();
            const target = e.target.closest('.zheng_nav_item');
            
            if (!target) return;
            
            // 移除所有active类
            document.querySelectorAll('.zheng_nav_item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 添加active类到当前点击的项
            target.classList.add('active');
            
            // 隐藏所有内容
            tabContents.forEach(content => {
                content.style.display = 'none';
            });
            
            // 显示对应的内容
            const tabId = target.getAttribute('data-tab');
            const activeContent = document.getElementById(tabId);
            if (activeContent) {
                activeContent.style.display = 'block';
            }
        });
    });
    </script>
</body>
</html>
